<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="common.js"></script>
    <title>注册页面</title>
</head>
<body>
<style>
    html, body, .biaodan {
        width: 100%;
        height: 100%;
        margin: 0px;
        color: #333333;
        font-size: 16px;
    }

    .biaodan {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .from-test {
        width: 400px;
        max-height: 400px;
        padding: 20px;
        border: 1px solid #333333;
    }

    .spanLabel {
        text-align: left;
        margin: 15px 0px;
    }

    .spanLabel > label {
        display: inline-block;
        width: 87px;
        text-align: right;
    }

    .spanLabel > input {
        display: inline-block;
        width: 200px;
        border: 1px solid #666666;
        padding: 8px 10px;
    }

    .send {
        background: #4CD964;
        display: inline-block;
        width: 220px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #666666;
        margin: 20px auto 0px;
        color: whitesmoke;
        letter-spacing: 2px;
        font-size: 16px;

    }
</style>
<!--表单提交提示信息-->
<div class="biaodan">
    <div class="from-test">
        <form>
            <div class="spanLabel">
                <a href="login.html" style="float:right;color: #4CD964">去登录</a>
            </div>
            <div class="spanLabel">
                <label>邮箱：</label>
                <input placeholder="请输入邮箱" class="name required" id="email"/>
            </div>
            <div class="spanLabel">
                <label>密码：</label>
                <input placeholder="请输入密码" class="name required" id="password"/>
            </div>
            <div class="spanLabel">
                <label>确认密码：</label>
                <input placeholder="请再次输入密码" class="name required" id="verifyPassword"/>
            </div>
            <div class="spanLabel">
                <label>验证码：</label>
                <input placeholder="请输入验证码" class="name required" id="code" style="width: 96px;"/>
                <input type="button" value="获取验证码" onclick="getCode()"
                       style="width: 100px;height:40px;background: #4CD964;color: whitesmoke;"/>
            </div>
            <button class='send' id='submit' onclick="register()">注册</button>
        </form>
    </div>
</div>
<script>
    //获取验证码
    function getCode() {
        let email = $('#email').val();
        if (isEmpty(email)) {
            alert("请先填写邮箱!");
            return;
        }
        if (isRegistered(email)) {
            alert('邮箱已经注册');
            return;
        }
        let getCodeUrl = "/code/create/" + email; //接口
        if (sendGet(getCodeUrl)) {
            alert("邮件发送成功，请查收！");
        } else {
            alert("邮件发送失败");
        }
    }

    //是否注册
    function isRegistered(email) {
        let isRegisteredUrl = "/user/isRegistered/" + email; //接口
        return sendGet(isRegisteredUrl);
    }

    //注册
    function register() {
        let email = $('#email').val();
        let password = $('#password').val();
        let verifyPassword = $('#verifyPassword').val();
        let code = $('#code').val();
        if (isEmpty(email) || isEmpty(password) || isEmpty(verifyPassword) || isEmpty(code)) {
            alert('表单项数据缺失！');
            return;
        }
        let registerUrl = "/user/register/" + email + "/" + password + "/" + code; //接口
        if (sendGet(registerUrl)) {
            alert("注册成功，去登录吧！");
        } else {
            alert("注册失败！");
        }
    }
</script>

</div>
</body>
</html>
